import { UploadOutlined } from "@ant-design/icons";
import Editor from "./../../../components/Editor";
import React, { Fragment, useState, useEffect } from "react";
import { GetOneKind, getKindlist } from './../../../api/kind'
import { getTwoSymptomlist, getSymptomlist } from './../../../api/symptom'
import { addDrugsFn } from './../../../api/drugs'

import {
    Form,
    Button,
    Upload,
    Input,
    Image,
    Switch,
    Select,
    Radio,
} from "antd";
const { Option } = Select;

const formItemLayout = {
    labelCol: {
        span: 6,
    },
    wrapperCol: {
        span: 14,
    },
};
function AddDrugs(props) {
    // 获取一级分类列表
    useEffect(() => {
        getKindlist().then(res => {
            setKindlist(res.data.str)
        })
        getSymptomlist().then(res => [
            setSymptomList(res.data.str)
        ])
    }, [])
    //获取一级分类的数据
    const [kindlist, setKindlist] = useState([])
    const [twokindlist, setTwokindlist] = useState([])
    const [symptomList, setSymptomList] = useState([])
    const [twoSymlist, setTwoSymlist] = useState([])
    // const [kindtwo, setkindtwo] = useState('')
    const [kind, setKind] = useState([]);
    const [symptom, setSymptom] = useState([])
    const [newarr, setNewarr] = useState([])
    const [newarr2, setNewarr2] = useState([])
    const handleProvinceChange = (value, options) => {
        setKind([options.children]);
        GetOneKind({ kindid: value }).then(res => {
            setTwokindlist(res.data.data)
        })
        // twokindlist.length === 0 ? setkindtwo('') : setkindtwo(twokindlist[0].kindname)
    };

    const onSecondCityChange = (value) => {
        setNewarr(kind.concat(value))
    };
    const handleProvinceChange2 = (value, options) => {
        setSymptom([options.children])
        getTwoSymptomlist({ Symptomid: value }).then(res => {
            console.log(res.data.data)
            setTwoSymlist(res.data.data)
        })
        // twokindlist.length === 0 ? setkindtwo('') : setkindtwo(twokindlist[0].kindname)
    };
    const onSecondCityChange2 = (value, options) => {
        setNewarr2(symptom.concat(options.children))
    };

    const [url, setUrl] = useState([]);
    const [url1, setUrl1] = useState([]);
    const [url2, setUrl2] = useState([]);
    const [imgmany, setImgmany] = useState([]);
    const [outerhtml, setOuterhtml] = useState("");

    const normFile = (e) => {
        if (e.fileList[0]) {
            const reader = new FileReader();
            reader.onloadend = (e) => {
                setUrl(e.target.result);
            };
            reader.readAsDataURL(e.file); //把图片转换成base64位格式
            return e && e.fileList;
        }
    };
    const normFile1 = (e) => {
        if (e.fileList[0]) {
            setImgmany(e.fileList);
            const reader = new FileReader();
            reader.onloadend = (e) => {
                setUrl1(e.target.result);
            };
            reader.readAsDataURL(e.file); //把图片转换成base64位格式
            return e && e.fileList;
        }
    };
    const normFile2 = (e) => {
        if (e.fileList[0]) {
            const reader = new FileReader();
            reader.onloadend = (e) => {
                setUrl2(e.target.result);
            };
            reader.readAsDataURL(e.file); //把图片转换成base64位格式
            return e && e.fileList;
        }
    };
    const uploads = (e) => {
        if (e.file.status === "removed") {
            setUrl([]);
        }
    };
    const uploads2 = (e) => {
        if (e.file.status === "removed") {
            setUrl2([]);
        }
    };
    // 提交表单
    const onFinish = (values) => {
        values.listimg = values.listimg[0].thumbUrl;
        values.instructions = values.instructions[0].thumbUrl;
        values.bannerimg = values.bannerimg.map((item, index) => {
            return item.thumbUrl;
        });
        values.drugkind = newarr
        values.symptom = newarr2
        // values.
        const Valuess = JSON.parse(JSON.stringify(values));
        Valuess.delIntroduction = outerhtml;
        console.log(Valuess);
        addDrugsFn(Valuess).then((res) => {
            console.log(res.data);
            props.history.goBack();
        });

    };
    //阻止图片的默认上传
    const beforeUpload = (picture) => {
        // setUrl(e.fileList[0].thumbUrl);
        return false;
    };
    //富文本编辑器中的方法
    const handlerGetHtml = (outerhtml) => {
        setOuterhtml(outerhtml);
    };
    return (
        <Fragment>
            <div className="heads">
                新增药品
                <Button type="danger" className="returns" onClick={() => { props.history.goBack() }}>
                    返回
                </Button>
            </div>
            <Form
                name="validate_other"
                {...formItemLayout}
                onFinish={onFinish}
                className="drugsForm"
            >
                <Form.Item
                    {...formItemLayout}
                    name="drugnumber"
                    label="药品编号"
                    rules={[
                        {
                            required: true,
                            message: "请输入药品编号",
                        },
                    ]}
                >
                    <Input placeholder="请输入药品编号" />
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    name="drugname"
                    label="药品名称"
                    rules={[
                        {
                            required: true,
                            message: "请输入药品名称",
                        },
                    ]}
                >
                    <Input placeholder="请输入药品名称" />
                </Form.Item>
                <Form.Item
                    name="listimg"
                    label="列表图"
                    valuePropName="fileList"
                    getValueFromEvent={normFile}
                    rules={[
                        {
                            required: true,
                            message: "请上传一张列表图",
                        },
                    ]}
                >
                    <Upload
                        name="logo"
                        listType="picture"
                        beforeUpload={beforeUpload}
                        onChange={uploads}
                    >
                        <Button
                            disabled={url.length !== 0 ? true : false}
                            icon={<UploadOutlined />}
                        >
                            点击上传图片
                        </Button>
                    </Upload>
                </Form.Item>
                {/* 列表图上传预览 */}
                <Form.Item
                    wrapperCol={{
                        span: 12,
                        offset: 6,
                    }}
                >
                    <Image width={100} src={url} />
                </Form.Item>
                <Form.Item
                    name="bannerimg"
                    label="轮播图"
                    valuePropName="fileList1"
                    getValueFromEvent={normFile1}
                    rules={[
                        {
                            required: false,
                            message: "请上传至少一张轮播图",
                        },
                    ]}
                >
                    <Upload
                        name="logo"
                        listType="picture"
                        beforeUpload={beforeUpload}
                        onChange={uploads}
                    >
                        <Button
                            disabled={imgmany.length === 4 ? true : false}
                            icon={<UploadOutlined />}
                        >
                            点击上传
                        </Button>
                    </Upload>
                </Form.Item>
                {/* 轮播图上传预览 */}
                <Form.Item
                    wrapperCol={{
                        span: 12,
                        offset: 6,
                    }}
                >
                    <Image width={100} src={url1} />
                </Form.Item>
                <Form.Item
                    name="isrecommend"
                    label="是否推荐"
                    rules={[
                        {
                            required: true,
                            message: "请选择是否推荐！",
                        },
                    ]}
                >
                    <Radio.Group>
                        <Radio value={true}>是</Radio>
                        <Radio value={false}>否</Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item {...formItemLayout} name="drugkind" label="药品分类" required>
                    <Select
                        placeholder="请选择"
                        style={{ width: 120 }}
                        onChange={handleProvinceChange}
                    >
                        {kindlist.map((item) => (
                            <Option key={item.kindid}>{item.kindname}</Option>
                        ))}
                    </Select>
                    <Select
                        style={{ width: 120 }}
                        onChange={onSecondCityChange}
                    >
                        {twokindlist.map((item) => (
                            <Option key={item.kindname} >{item.kindname}</Option>
                        ))}
                    </Select>
                </Form.Item>

                <Form.Item {...formItemLayout} name="drugSym" label="症状" required>
                    <Select
                        placeholder="请选择"
                        style={{ width: 120 }}
                        onChange={handleProvinceChange2}
                    >
                        {symptomList.map((item) => (
                            <Option key={item.Symptomid}>{item.SymptomName}</Option>
                        ))}
                    </Select>
                    <Select
                        style={{ width: 120 }}
                        onChange={onSecondCityChange2}
                    >
                        {twoSymlist.map((item) => (
                            <Option key={item.Symptomid}>{item.SymptomName}</Option>
                        ))}
                    </Select>
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    name="Specifications"
                    label="规格"
                    rules={[
                        {
                            required: true,
                            message: "请输入药品规格！",
                        },
                    ]}
                >
                    <Input placeholder="请输入..." />
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    name="drugPrice"
                    label="价格"
                    rules={[
                        {
                            required: true,
                            message: "请输入药品价格!",
                        },
                    ]}
                >
                    <Input placeholder="￥ 请输入..." />
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    name="stock"
                    label="库存"
                    rules={[
                        {
                            required: true,
                            message: "请输入药品库存！",
                        },
                    ]}
                >
                    <Input placeholder="请输入..." />
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    name="stockInfo"
                    label="库存警告"
                    rules={[
                        {
                            required: true,
                            message: "请输入库存警告！",
                        },
                    ]}
                >
                    <Input placeholder="请输入..." />
                </Form.Item>
                <Form.Item
                    name="isFreeFreight"
                    label="免运费"
                    rules={[
                        {
                            required: false,
                            message: "请选择是否免运费！",
                        },
                    ]}
                >
                    <Radio.Group>
                        <Radio value={true}>是</Radio>
                        <Radio value={false}>否</Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item
                    name="isPrescription"
                    label="是否处方药"
                    rules={[
                        {
                            required: true,
                            message: "请选择是否是处方药！",
                        },
                    ]}
                >
                    <Radio.Group>
                        <Radio value={true}>是</Radio>
                        <Radio value={false}>否</Radio>
                    </Radio.Group>
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    name="documentNumber"
                    label="拼准文号"
                    rules={[
                        {
                            required: true,
                            message: "请输入拼准文号",
                        },
                    ]}
                >
                    <Input placeholder="请输入..." />
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    name="mainFunction"
                    label="主治功能"
                    rules={[
                        {
                            required: true,
                            message: "请输入主治功能",
                        },
                    ]}
                >
                    <Input placeholder="请输入..." />
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    name="usage"
                    label="用法用量"
                    rules={[
                        {
                            required: true,
                            message: "请输入用法用量",
                        },
                    ]}
                >
                    <Input placeholder="请输入..." />
                </Form.Item>
                <Form.Item
                    name="instructions"
                    label="说明书"
                    valuePropName="fileList2"
                    getValueFromEvent={normFile2}
                    rules={[
                        {
                            required: true,
                            message: "请上传说明书",
                        },
                    ]}
                >
                    <Upload
                        name="logo"
                        listType="picture"
                        beforeUpload={beforeUpload}
                        onChange={uploads2}
                    >
                        <Button
                            disabled={url2.length !== 0 ? true : false}
                            icon={<UploadOutlined />}
                        >
                            Click to upload
            </Button>
                    </Upload>
                </Form.Item>
                {/* 说明书上传预览 */}
                <Form.Item
                    wrapperCol={{
                        span: 12,
                        offset: 6,
                    }}
                >
                    <Image width={100} src={url2} />
                </Form.Item>
                <Form.Item
                    {...formItemLayout}
                    name="drugEnterprise"
                    label="药企"
                    rules={[
                        {
                            required: true,
                            message: "请输入药企名称!",
                        },
                    ]}
                >
                    <Input placeholder="请输入..." />
                </Form.Item>
                <Form.Item
                    name="isOntheshelf"
                    label="上架"
                    valuePropName="checked"
                    rules={[
                        {
                            required: true,
                            message: "请选择是否上架!",

                        },
                    ]}
                >
                    <Switch />
                </Form.Item>

                <Form.Item {...formItemLayout} label="详细介绍"
                    rules={[
                        {
                            required: true,
                            message: "请填写详情描述!",
                        },
                    ]}
                >
                    <div style={{ height: "200px", width: "80%" }}>
                        <Editor getHtml={handlerGetHtml} />
                    </div>
                    渲染富文本编辑器
                    <div dangerouslySetInnerHTML={{ __html: outerhtml }}></div>
                </Form.Item>

                <Form.Item
                    wrapperCol={{
                        span: 6,
                        offset: 3,
                    }}
                >
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                </Form.Item>
            </Form>
        </Fragment>
    );
}

export default AddDrugs;
